<template>
  <PageTemplate>
    <div class="need_deal_task" slot="content">
      <el-form
        inline
        :model="query"
        ref="query"
        label-position="right"
        label-width="70px"
        class="query-form bg-color-white"
      >
      <el-row class="query-form-like">
        <div></div>
        <div style="float:right;">
          <el-form-item>
            <el-input v-model="query.ketiCode" clearable placeholder="请输入编码/名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryDataTableLike">{{$t('cm.search')}}</el-button>
            <el-button plain @click="queryCollapse" :icon="queryCollapseIcon">{{$t('cm.advancedSearch')}}</el-button>
          </el-form-item>
        </div>
      </el-row>
      <el-collapse-transition>
        <div v-show="queryCollapseStatus" class="query-collapse">
          <el-form-item label="专业部分" prop="ketiName">
            <el-input v-model="query.ketiName" clearable placeholder="请输入专业部分"></el-input>
          </el-form-item>
          <div class="text-c">
            <el-button type="primary" icon="el-icon-search" @click="getAllDataTable">{{$t('cm.query')}}</el-button>
            <el-button plain @click="queryReset('query')">{{$t('cm.reset')}}</el-button>
          </div>
        </div>
      </el-collapse-transition>
      </el-form>
      <el-row class="row-empty-20"></el-row>
      <PageCollapse :collapseStatus="true">
        <el-row slot="title">
          <el-col :span="12"><div style="line-height: 40px"> 科研课题列表 </div></el-col>
          <el-col :span="12">
            <div style="float:right;">
              <el-button type="primary">
                <i class="el-icon-edit"></i> {{$t('cm.add')}}
              </el-button>
              <el-button type="primary">
                <i class="el-icon-delete"></i> {{$t('cm.delete')}}
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-table
          class="table"
          border
          ref="multipleTable"
          :data="tables"
          tooltip-effect="dark"
          style="width: 100%"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
          :header-cell-style="{background:tableHeaderBGC}"
        >
          <el-table-column align="center" type="selection" width="60"></el-table-column>
          <el-table-column type="index" :label="$t('cm.no')" align="center" width="60"></el-table-column>
          <el-table-column prop="processName" :label="$t('sys.process_processName')" align="center"></el-table-column>
          <el-table-column prop="processType" :label="$t('sys.process_processType')" align="center"></el-table-column>
          <el-table-column prop="processUrl" :label="$t('sys.process_processUrl')" align="center"></el-table-column>
          <el-table-column prop="orderIndex" :label="$t('sys.process_orderIndex')" align="center"></el-table-column>
          <el-table-column prop="isValid" :label="$t('sys.process_isValid')" align="center"></el-table-column>
          <el-table-column prop="remark" :label="$t('sys.process_remark')" align="center"></el-table-column>
          <el-table-column :label="$t('cm.operate')" prop="statussss" align="center"></el-table-column>
        </el-table>
        <div class="block pager-customer">
          <el-pagination
            background
            layout="total, slot, prev"
            :current-page.sync="pagingCurrentPageNum"
            :page-sizes="pagingPageSizes"
            :page-size="pagingPageSize"
            :total="pagingTotal"
            @size-change="pagingHandleSizeChange"
            @current-change="pagingHandleCurrentChange"
          >
            <el-button
              ref="firstPage"
              @click="firstPage"
              class="first-page"
              :disabled="firstPageDisabled"
            >{{$t('cm.firstPage')}}</el-button>
          </el-pagination>
          <el-pagination
            background
            layout="pager, next, slot, jumper"
            :current-page.sync="pagingCurrentPageNum"
            :page-sizes="pagingPageSizes"
            :page-size="pagingPageSize"
            :total="pagingTotal"
            @size-change="pagingHandleSizeChange"
            @current-change="pagingHandleCurrentChange"
          >
            <el-button
              ref="lastPage"
              @click="lastPage"
              class="last-pager"
              :disabled="lastPageDisabled"
            >{{$t('cm.lastPage')}}</el-button>
          </el-pagination>
        </div>
      </PageCollapse>
    </div>
  </PageTemplate>
</template>
<style lang="scss">
</style>
<script>
import { mapState, mapActions } from 'vuex'
import PageTemplate from '@/components/common/PageTemplate'
import PageCollapse from '@/components/common/PageCollapse'
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import {COMMON} from '@/utils/commonUtil'
import Pagination from '@/mixins/Pagination'
export default {
  components: { PageTemplate, PageCollapse },
  data () {
    return {
      query: {
        ketiCode: null,
        ketiName: null
      },
      tables:[]
    }
  },
  created () {
  },
  mixins: [Pagination],
  watch: {
  },
  methods: {
    ...mapActions('common', [
      'queryCollapse'
    ]),
    //重置操作
    queryReset (formName) {
      this.$refs[formName].resetFields()
    },
    queryDataTableLike () {
    },
    getAllDataTable () {
      this.queryTableList({
          ...this.query,
          t: Math.random(),
          pageNum: this.pagingCurrentPageNum,
          pageSize: this.pagingPageSize
      })
    },
    //统一与后台操作的方法
    queryTableList (params) {
      //这里的params是对象
      //注意 如果后台json转对象 时间类型好像会抛异常  转到后台 前台用 qs 来转换数据 设置一个全局拦截器 main.js 参考
      let _this = this
      let tables = []
      let totalCount = 0
      service.getDoneTaskList(params, result => {
        if (result.status === Constant.RESP_STATE_SUCCESS && result.data.code === Constant.RT_SUCCESS) {
          let data = result.data.data.data
          //表格数据  数组            
          tables = data.resultData
          //分页数据
          totalCount = data.page.totalCount
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.data.msg)
        }
        _this.setPagingTotal(totalCount)
        this.tables = tables
      })
    },
    formatTableText (row, column, cellValue, index) {
      var fmtValue = null
      return fmtValue !== null && fmtValue !== undefined ? fmtValue : cellValue
    }
  },
  mounted () {
  },
  computed: {
    ...mapState({
      tableHeaderBGC: state => state.common.tableHeaderBGC,
      queryCollapseStatus: state => state.common.queryCollapseStatus,
      queryCollapseIcon: state => state.common.queryCollapseIcon
    })
  }
}
</script>